<template>
<div id="content" 
    v-loading="isloading"
    element-loading-text="数据加载中...."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    >

<!--
    <div id="content"> -->
        <!-- 内容 -->
        <el-row :gutter="10" class="chart_top">
            <el-col :span="24">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative; ">
                            <div style="float:left;width:300px;text-align:center;height:30px;border:0px solid red;margin-top:15px;margin-left:20px;line-height:30px;">  {{bottomBar.ptaskNo?'结账单号:'+bottomBar.ptaskNo:""}}</div>
                        <el-row class="data_box" style="border:0px solid red;float:right;top:10px;right:10px;z-index:1999;width:600px;height:32px;">
                                              
                            <el-form :inline="true" :model="searchBox" label-width="120px"  class="search-panle"> 
                                <el-form-item label="">
                                </el-form-item>
                                <el-form-item label="">
                                    <el-badge :value="tipCount" class="item">
                                        <el-button size="small" v-popover:createValueList @click="queryDayValList">甘特图</el-button>
                                    </el-badge>
                                </el-form-item>
                                <el-form-item label="计划导入年份:">
                                    <el-date-picker
                                        v-model="searchBox.searchTime"
                                        type="year"
                                        placeholder="选择年份"
                                        style="width:130px;margin-top:0px;"
                                        @change="searchByDate"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="">
                                        <el-button   @click="resetSelectSearch" icon="el-icon-refresh-left"></el-button>
                                </el-form-item>
                            </el-form>
                        </el-row>   
                        <div id="topBar" :style="{width:'100%',height:autoHeight-50+'px'}" v-loading='loading'></div>   
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;"> 
                        <div style="float:left;width:300px;text-align:center;height:30px;border:0px solid red;margin-top:15px;margin-left:20px;line-height:30px;">  {{bottomBar.childPtaskNo?'单号:'+bottomBar.childPtaskNo:""}}</div>
                        <div id="bottomBar"  :style="{width:'100%',height:autoHeight-50+'px'}"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div id="popover">
            <el-popover
                ref="search"
                width="900"
                trigger="click"
            >
            <!-- private String taskNo;//任务单号
            private Integer drawCount;//图纸张数
            private Long drawNum;//图纸件数
            private BigDecimal sxWorkTime;//数铣总工时
            private BigDecimal pxWorkTime;//普洗总工时
            private BigDecimal totalPrices;//总价值 --> 
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">统筹记录</h1>
                <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 5px;">
                    <el-table  :data="detailTableList"  tooltip-effect  highlight-current-row border stripe>
                        <el-table-column type="index" :index="0" label="序号" min-width="120" align="center"></el-table-column>
                        <el-table-column property="taskNo" label="任务单号" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="drawCount" label="图纸总张数" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="drawNum" label="总件数" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="sxWorkTime" label="数铣总工时" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="pxWorkTime" label="普铣总工时" min-width="120" align="center" sortable></el-table-column>
                        <el-table-column property="totalPrices" label="总价值(W)" min-width="120" align="center" sortable></el-table-column>
                    </el-table>
                </div>
            </el-popover>
        </div>
        <el-popover
                ref="createValueList"
                :width="autoWidth"
                trigger="click"
            >
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">甘特统计</h1>
                <!-- <h1 style="margin-bottom:15px;padding:5px 0px 5px 15px;">导入计划次数:<span style="color:red;"> {{inputCount}}</span> 次</h1> -->
                <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 15px;">
                  <!-- <div style="width:400px;border:0px solid red; z-index:9999;    position:absolute;right:60px;top:55px;">
                     <span class="demonstration">时间</span>
                     <el-date-picker
                          v-model="workTimeList"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="searchGantt"
                          :picker-options="pickerOptions"
                          >
                     </el-date-picker>
                  </div> -->
                  <div id="gantt" :style="{width:(autoWidth-100)+'px',height:ganttAutoHeight}">

                  </div>
                </div>
        </el-popover>
        <el-dialog :title="dialog.topBarDetail.title" width="80%"  :visible.sync="dialog.topBarDetail.isShow"  v-dialogDrag>
            <el-input type="text" v-model="serchRule" auto-complete="off" style="width:100%;height:28px; float:left;margin-right:10px;" placeholder="请输入需要查询的图号" >
                <template slot="prepend">图纸编号</template>
            </el-input>
            <el-table  :data="dialog.topBarDetail.tableList.filter(data => data.draw_code.includes(serchRule)).slice((dialog.topBarDetail.currentPage-1)*dialog.topBarDetail.pagesize,dialog.topBarDetail.currentPage*dialog.topBarDetail.pagesize)">
                <el-table-column property="idx" label="序号" min-width="120" align="center"></el-table-column>
                <el-table-column property="draw_code" label="图纸编号" min-width="120" align="center"></el-table-column>
                <el-table-column property="draw_name" label="图纸名称" min-width="120" align="center"></el-table-column>
                <el-table-column property="num" label="件数" min-width="120" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button @click="drawDetail(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                </el-table-column>
            </el-table>
            <el-pagination  @size-change="topDetailHandleSizeChange" @current-change="topDetailHandleCurrentChange" :current-page="dialog.topBarDetail.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="dialog.topBarDetail.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dialog.topBarDetail.total"></el-pagination>
        </el-dialog>
        <el-dialog :title="dialog.drawDetail.title" width="100%"  :visible.sync="dialog.drawDetail.isShow"  v-dialogDrag>
            <el-input type="text" v-model="serchRuleA" auto-complete="off" style="width:100%;height:28px; float:left;margin-right:10px;" placeholder="请输入需要查询的图号" >
                <template slot="prepend">图纸编号</template>
            </el-input>
            <el-table  :data="dialog.drawDetail.tableList.filter(data => data.drawCode.includes(serchRuleA)).slice((dialog.drawDetail.currentPage-1)*dialog.drawDetail.pagesize,dialog.drawDetail.currentPage*dialog.drawDetail.pagesize)">
                <el-table-column  label="操作" min-width="60" align="center" fixed="left">
                    <template slot-scope="scope">
                         <el-button v-if="scope.row.planStatus ===0" @click="updateTaskPlanStatus(scope.row.id,1)" type="text" size="small">加入</el-button>
                         <el-button v-if="scope.row.planStatus ===1" @click="updateTaskPlanStatus(scope.row.id,0)" type="text" size="small">取消</el-button>
                    </template>      
                </el-table-column>
                <el-table-column property="taskNo" label="任务单号" min-width="120" align="center"></el-table-column>
                <el-table-column property="taskSerialNo" label="流水号" min-width="120" align="center"></el-table-column>
                <el-table-column property="makeNo" label="生产令号" min-width="180" align="center"></el-table-column>
                <el-table-column property="drawCode" label="图纸编号" min-width="120" align="center"></el-table-column>
                <el-table-column property="drawName" label="图纸名称" min-width="120" align="center"></el-table-column>
                <el-table-column property="nums" label="件数" min-width="120" align="center"></el-table-column>
                <el-table-column property="wbPlanFinsihDate" label="外包完成时间" min-width="120" align="center">
                    <template slot-scope="scope">
                        {{timestampToTime(scope.row.wbPlanFinsihDate,'yyyy-mm-dd')}}
                    </template>                    
                </el-table-column>
                <el-table-column property="isUploadDraw" label="资料上传" min-width="120" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isUploadDraw ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>
                </el-table-column>
                <el-table-column property="isMaterialArrvie" label="到料" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isMaterialArrvie ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>
                </el-table-column>
                <el-table-column property="isMaterialTailor" label="下料" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isMaterialTailor ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>
                </el-table-column>
                <el-table-column property="isFinishProcess" label="工艺" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProcess ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>                    
                </el-table-column>
                <el-table-column property="isFinishProgram" label="编程" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template> 
                </el-table-column>
                <!-- <el-table-column property="num" label="计划是否下达" min-width="120" align="center"></el-table-column> -->
                <el-table-column property="num" label="刀具是否齐备" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column> 
                <el-table-column property="num" label="排程" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column> 
                
                <el-table-column property="num" label="数铣" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                
                <el-table-column property="num" label="普铣" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                
                <el-table-column property="num" label="钳工" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                
                <el-table-column property="num" label="普车" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                
                <el-table-column property="num" label="外协" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                
                <el-table-column property="num" label="检验" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                                
                <el-table-column property="num" label="入成品库" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                                                
                <el-table-column property="num" label="出货" min-width="60" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column>
                                                                                
                <!-- <el-table-column property="num" label="结账" min-width="60" fixed align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFinishProgram ===1" class='el-icon-circle-check  cl-success fn-size18 '></span>
                    </template>      
                </el-table-column> -->
                
                <!-- <el-table-column property="num" label="是否首检" min-width="120" align="center"></el-table-column>
                <el-table-column property="num" label="是否检验" min-width="120" align="center"></el-table-column>
                <el-table-column property="num" label="是否出货" min-width="120" align="center"></el-table-column>
                <el-table-column property="num" label="是否结账" min-width="120" align="center"></el-table-column> -->
                <!-- <el-table-column fixed="right" label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button @click="drawDetail(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                </el-table-column> -->
            </el-table>
            <el-pagination  @size-change="drawDetailHandleSizeChange" @current-change="drawDetailHandleCurrentChange" :current-page="dialog.drawDetail.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="dialog.drawDetail.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dialog.drawDetail.total"></el-pagination>
        </el-dialog>
        <el-dialog :title="dialog.topGxBarDetail.title" width="80%"  :visible.sync="dialog.topGxBarDetail.isShow"  append-to-body v-dialogDrag>
            <div id="topGxBar"  :style="{height:autoHeight-50+'px'}"></div>
        </el-dialog>
        <!-- 进行子菜单详情查看 -->
        <el-dialog title="" width="80%"  :visible.sync="dialog.childBox.isShow"  v-dialogDrag>
            <el-col :span="24">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative; ">
                        <!-- <el-row class="data_box" style="border:0px solid red;float:right;top:10px;right:10px;z-index:1999;width:500px;height:32px;">
                            <el-form :inline="true" :model="innersearchBox" label-width="50px"  class="search-panle"> 
                                <el-form-item label="">
                                    <el-badge :value="innerTipCount" class="item">
                                        <el-button size="small" v-popover:search>统筹</el-button>
                                    </el-badge>
                                </el-form-item>
                                <el-form-item label="日期:">
                                    <el-date-picker
                                        v-model="innersearchBox.searchTime"
                                        type="month"
                                        placeholder="选择日期"
                                        style="width:130px;margin-top:0px;"
                                        @change="innersearchByDate"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="单号:">
                                    <el-select v-model="innersearchBox.taskNo" placeholder="请选择" filterable  @change="searchByTaskNo">
                                        <el-option
                                        v-for="item in searchSelectList"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                        >
                                        </el-option>
                                    </el-select> 
                                </el-form-item>
                            </el-form>
                        </el-row>    -->
                        <div id="innerTopBar" :style="{width:'100%',height:autoHeight-50+'px'}" v-loading='loading'></div>   
                    </div>
                </el-card>
            </el-col>
        </el-dialog>
        <el-dialog :title="dialog.bottomBarDetail.title" width="80%"  :visible.sync="dialog.bottomBarDetail.isShow"  v-dialogDrag>
            <el-input type="text" v-model="serchRuleB" auto-complete="off" style="width:100%;height:28px; float:left;margin-right:10px;" placeholder="请输入需要查询的图号" >
                <template slot="prepend">图纸编号</template>
            </el-input>
            <el-table  :data="dialog.bottomBarDetail.tableList.filter(data => data.drawCode.includes(serchRuleB)).slice((dialog.bottomBarDetail.currentPage-1)*dialog.bottomBarDetail.pagesize,dialog.bottomBarDetail.currentPage*dialog.bottomBarDetail.pagesize)">
                <el-table-column type="index" show-overflow-tooltip width="50" label="序号" min-width="120" align="center"></el-table-column>
                <el-table-column property="drawCode" label="图纸编号" min-width="120" align="center"></el-table-column>
                <el-table-column property="drawName" label="图纸名称" min-width="120" align="center"></el-table-column>
                <el-table-column property="drawNums" label="张数" min-width="120" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button @click="drawDetail(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                </el-table-column>
            </el-table>
            <el-pagination  @size-change="bottomDetailHandleSizeChange" @current-change="bottomDetailHandleCurrentChange" :current-page="dialog.bottomBarDetail.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="dialog.bottomBarDetail.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dialog.bottomBarDetail.total"></el-pagination>
        </el-dialog>
    </div>
</template>
<script>
import echarts from 'echarts';
import planApi from 'plugins/axios/planApi.js';
export default {
    data(){
        return{
            isloading:false,
            dataIndex:'',
            seriesIndex:'',
            checkName:'',
            isFrame:false,
            isChild:false,
            tipCount:24,
            innerTipCount:20,
            serchRule:'',
            serchRuleA:'',
            serchRuleB:'',
            detailTableList:[],
            topBarTableList:[],
            drawDetailTableList:[],
            bottomBarTableList:[],
            searchSelectList:[],
            grid:{
                legendData:[],
                line:null,
                pie:null,
                bar:null,
                lineOption:null,
                pieOption:null,
                barOption:null,
                lineYAxis:null,
                lineXAxis:null,
                pieYAxis:null,
                pieXAxis:null,
                barYAxis:null,
                barXAxis:null,
                lineSeriesData:[],
                pieSeriesData:[],
                barSeriesData:[],

            },
            topBar:{
                xAxisData:[],
                seriesData:[],
                records:[],
            },
            innerTopBar:{
                xAxisData:[],
                seriesData:[],
                records:[],
            },
            bottomBar:{
                xAxisData:[],
                seriesData:[],
                records:[],
                childPtaskNo:null,
            },
            topGxBar:{
                xAxisData:[],
                seriesData:[],
                records:[],
            },
            loading:false,
            itemColor:[],
            searchBox:{
                searchTime:new Date(),
                searchMonth:1,
                taskNo:'', 
                isDidThis:null,
                wb_plan_finsih_date:'',
                gx:'',
                draw_code:'',
            },
            innersearchBox:{
                searchTime:new Date(),
                searchMonth:1,
                taskNo:'', 
                isDidThis:null,
                wb_plan_finsih_date:'',
                gx:'',
                draw_code:'',
            },
            dialog:{
                topBarDetail:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                },
                drawDetail:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                    ptaskNo:null,
                },
                topGxBarDetail:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                },
                bottomBarDetail:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                },
                childBox:{
                    title:'',
                    isShow:false,
                    currentPage:1,
                    pagesize:10,
                    total:0,
                    tableList:[],
                },
            },
            customData:[],
        }
    },
    mounted(){
        let self = this;
        self.$nextTick(() => {
            self.init();
        });
    },
    created(){
        let self = this;
        window.self=this;
        //self.init();
    },
    watch:{
        $route(){
        }
    },
    computed:{
        autoHeight(){
            return this.$store.state.clientHeight/2-55;
        },
        autoWidth(){
            return (this.$store.state.clientWidth-200);
        },
        ganttAutoHeight(){
            return (this.$store.state.clientHeight-200)+'px';
        },
    },
    methods:{
        //初始化
        init(){
            let self = this;
            self.initBar();      
        },
        //初始化Bar统计图
        initBar(){
            let self = this;
            self.queryInitTopBarData();
            // self.queryInitBottomBarData();
            // self.queryDetailData();
        },
        //查询Top柱状统计图数据
        queryInitInnerTopBarData(){
            let self = this;
            let taskNo = self.innersearchBox.taskNo;
            let params ={"task_no":taskNo};
            planApi.orderGraphTopBarByCondtion(params).then(res=>{
                let tempArray = res.content.records;
                self.innerTopBar.xAxisData =  res.content.dateList;
                self.innerTopBar.records = tempArray;
                self.setInnerTopBarSeriesData();
            });
        },
        //加工topBar相关series
        setInnerTopBarSeriesData(){
            let self = this;
            self.innerTopBar.seriesData = [];
            let newData = [];
            let oldData = [];
            // {
            //     name: '直接访问',
            //     type: 'bar',
            //     data: [320, 332, 301, 334, 390, 330, 320]
            // },
            // self.topBar.records;
            //进行
            if(self.innerTopBar.records!=undefined &&self.innerTopBar.records.length!=0){
                self.innerTopBar.records.forEach(item=>{
                    if(item.state==='1'){
                        //老图纸
                        oldData.push({name:'老图纸',value:[item.wb_plan_finsih_date,item.num,item.task_no,item.state]});
                    }else if(item.state==='0') {
                        //新图纸
                        newData.push({name:'新图纸',value:[item.wb_plan_finsih_date,item.num,item.task_no,item.state]});
                    }        
                });
            };
            let seriesDataForNew ={
                name:'新图纸',
                type:'bar',
                stack:'图纸',
                data:newData
            };
            let seriesDataForOld ={
                name:'老图纸',
                type:'bar',
                stack:'图纸',
                data:oldData
            };
            self.innerTopBar.seriesData.push(seriesDataForNew);
            self.innerTopBar.seriesData.push(seriesDataForOld);
            self.setInitInnerTopBarOption();
        },
        //设置TopBar统计图Option
        setInitInnerTopBarOption(){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];
            let echartsTopBar = echarts.init(document.getElementById("innerTopBar"));
            echartsTopBar.clear();
            let option = {
                    title: {
                        text: '订单柱状图'
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        alwaysShowContent:false,
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        renderMode:'html',
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.innerTopBarTooltipHander,
                    },
                    legend: {
                        data:['新图纸','老图纸'], 
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 1,
                            end: 100,
                            width: 1,
                        },
                        {
                            type: 'inside',
                            start: 1,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 10,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: self.innerTopBar.xAxisData
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} 张'  
                            },  
                        show: true  
                    },
                    series:self.innerTopBar.seriesData
            };
            // echartsTopBar.on('click',function(params){
            // //点击的柱子的名称
            // self.dataIndex = params.dataIndex;
            // //柱形图重构
            // })
            echartsTopBar.setOption(option);
        },
        //查询Top柱状统计图数据
        queryInitTopBarData(){
           let self = this;
            self.isloading = true;
            
            let year = self.searchBox.searchTime.getFullYear();
            planApi.selectOrderTotalStatistics(year).then(res=>{
                let tempArray = res.content.data;
                self.customData = tempArray;
                self.tipCount = tempArray.length;
                self.topBar.xAxisData =  res.content.pTaskNo;
                self.topBar.records = tempArray;
                console.log(tempArray);
                self.setTopBarSeriesData();
                self.isloading = false;
            });


        },
        //查询Top柱状统计图子单数据
        queryInitTopBarDataForChild(){
            let self = this;
            planApi.selectOrderChildrenStatistics(self.bottomBar.ptaskNo,self.searchBox.searchTime.getFullYear()).then(res=>{
                let tempArray = res.content.data;
                self.isChild = true;
                self.customData = tempArray;
                self.tipCount = tempArray.length;
                self.topBar.xAxisData =  res.content.pTaskNo;
                self.topBar.records = tempArray;
                self.bottomBar.childPtaskNo = null;
                let echartsBottomBar = echarts.init(document.getElementById("bottomBar"));
                echartsBottomBar.clear();
                self.setTopBarSeriesData();
                self.isloading = false;
            });
        },
        //加工topBar相关series
        setTopBarSeriesData(){
            let self = this;
            self.topBar.seriesData = [];
            let newData = [];
            let oldData = [];
                // /**
                //      * 结账订单编号
                //      */
                //     private String pTaskNo;
                //     /**
                //      * 结账订单开始日期（年-月）
                //      */
                //     private String startDate;
                //     /**
                //      * 结账订单结束日期（年-月）
                //      */
                //     private String endDate;
                //     /**
                //      * 图纸数量
                //      */
                //     private Integer drawCount;
                //     /**
                //      * 图纸件数
                //      */
                //     private Integer drawSumNums;
                //     /**
                //      * 子订单数量
                //      */
                //     private Integer childTaskCount;
                //     /**
                //      * 数铣总工时（29所）
                //      */
                //     private Double sxTotalWorkTimes;
                //     /**
                //      * 普洗总工时（29所）
                //      */
                //     private Double pxTotalWorkTimes;
                //     /**
                //      * 数铣总价值（按照29所给的工时计算）
                //      */
                //     private Double sxTotalWorth;
                //     /**
                //      * 普洗总价值（按照29所给的工时计算）
                //      */
                //     private Double pxTotalWorth;
                //     /**
                //      * 总价值（按照29所给的工时计算）
                //      */
                //     private Double totalWorth;
                //     /**
                //      * 完成进度
                //      */
                //     private String overDegree;
                //     /**
                //      * 工序详情
                //      */
                //     private List<GxGsPricesStatistics> gxStatisticsList;
                //     /**
                //      * 工序名称列表
                //      */
                //     private List<String> gxNameList;
            //进行
            if(self.topBar.records!=undefined &&self.topBar.records.length!=0){
                self.topBar.records.forEach(item=>{
                        newData.push({name:self.searchBox.searchTime,value:[
                            item.ptaskNo,  //结账订单编号
                            item.drawCount,//图纸数量
                            item.drawSumNums,//图纸件数
                            item.startDate,// 结账订单开始日期（年-月）
                            item.endDate,  // 结账订单结束日期（年-月）
                            item.childTaskCount,//子订单数量
                            item.sxTotalWorkTimes,//数铣总工时（29所）
                            item.sxTotalWorth,//数铣总价值（按照29所给的工时计算）
                            item.pxTotalWorkTimes,//普洗总工时（29所）
                            item.pxTotalWorth,//普洗总价值（按照29所给的工时计算）
                            item.totalWorth,//总价值（按照29所给的工时计算）
                            item.overDegree,//完成进度
                            item.totalWorth,//总价值（按照29所给的工时计算）
                            item.gxStatisticsList,//工序详情
                            item.gxNameList,//工序名称列表
                            item.orderPlanStatus,//订单的计划状态
                            ]});     
                });
            };
            let seriesDataForNew ={
                name:self.searchBox.searchTime,
                type:'bar',
                itemStyle: {
                    normal: {
                        label: { show: true },
                        color: function (params){
                            if(params.value[15] == 0){
                                return "#c23531";
                            }else  if(params.value[15] == 1){
                                return "gray";
                            }else  if(params.value[15] == 2){
                                return "green";
                            }else{
                                return "blue";
                            }
                        }
                    }
                },
                data:newData
            };
            self.topBar.seriesData.push(seriesDataForNew);
            self.setInitTopBarOption();
        },
        //设置TopBar统计图Option
        setInitTopBarOption(){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];
            let echartsTopBar = echarts.init(document.getElementById("topBar"));
            echartsTopBar.clear();
            let option = {
                    title: {
                        text: '',
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        alwaysShowContent:false,
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        renderMode:'html',
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.topBarTooltipHander,
                    },
                    legend: {
                        data:[self.searchBox.searchTime], 
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 1,
                            end: 100,
                            width: 1,
                        },
                        {
                            type: 'inside',
                            start: 1,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 10,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: self.topBar.xAxisData
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} 张'  
                            },  
                        show: true  
                    },
                    series:self.topBar.seriesData
            };
            // echartsTopBar.on('click',function(params){
            // //点击的柱子的名称
            // self.dataIndex = params.dataIndex;
            // //柱形图重构
            // })
            echartsTopBar.setOption(option);
        },
        //获取某一月份所有生产任务统筹信息
        queryDetailData(){
            let self = this;
            let year = self.innersearchBox.searchTime.getFullYear();
            let month = self.innersearchBox.searchTime.getMonth()+1;
                // task_no:self.searchBox.taskNo,
                // draw_code:self.searchBox.draw_code,
                // wb_plan_finsih_date:self.searchBox.wb_plan_finsih_date
            planApi.queryDetailData(year,month).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.detailTableList = res.content;
                    self.innerTipCount = self.detailTableList.length==0?0:self.detailTableList.length-1;
                    // self.$nextTick(()=>{
                    //     self.setTopGxBarSeriesData();                        
                    // });
                }
            });
        }, 
        //获取一天或某个图纸相关的工序数据
        topGxDetailData(){
            let self = this;
            let param = {
                // year:self.searchBox.searchTime.getFullYear(),
                // month:self.searchBox.searchTime.getMonth()+1,
                task_no:self.innersearchBox.taskNo,
                draw_code:self.innersearchBox.draw_code,
                wb_plan_finsih_date:self.innersearchBox.wb_plan_finsih_date
            };
            planApi.queryTopDetailGxData(param).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.topGxBar.xAxisData =  res.content.gxNameList;
                    self.topGxBar.records =  res.content.records;
                    self.dialog.topGxBarDetail.title = '工序柱状统计';
                    self.dialog.topGxBarDetail.isShow = true;
                    self.$nextTick(()=>{
                        self.setTopGxBarSeriesData();                        
                    });
                }
            });
        }, 
        //加工topGxBar相关series
        setTopGxBarSeriesData(){
            let self = this;
            self.topGxBar.seriesData = [];
            let data = [];
            let oldData = [];
            if(self.topGxBar.records!=undefined &&self.topGxBar.records.length!=0){
                self.topGxBar.records.forEach(item=>{
                        data.push({name:'',value:[item.gxName,item.drawCount,item.drawNums,item.gxCode,item.confirmWorkTime,item.predictWorkTime,item.wbPrice]});
                    }        
                );
            };
            let seriesDataForBox={
                name:'',
                type:'bar',
                data:data
            };
            self.topGxBar.seriesData.push(seriesDataForBox);
            self.setInitTopGxOption();
        },
        //设置topGxBar统计图Option
        setInitTopGxOption(){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];

            let option = {
                    title: {
                        text: '本地工序柱状图'
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        alwaysShowContent:false,
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        renderMode:'html',
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.topGxBarTooltipHander,
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 1,
                            end: 100,
                            width: 1,
                        },
                        {
                            type: 'inside',
                            start: 1,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 10,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: self.topGxBar.xAxisData
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} 张'  
                            },  
                        show: true  
                    },
                    series:self.topGxBar.seriesData
            };
            let echartsTopGxBar = echarts.init(document.getElementById("topGxBar"));
            echartsTopGxBar.clear();
            echartsTopGxBar.setOption(option);
        },
        //查询Bottom柱状统计图数据
        queryInitBottomBarData(){
            let self = this;
            let year = self.searchBox.searchTime.getFullYear();
            let month = self.searchBox.searchTime.getMonth();
            let taskNo = self.searchBox.taskNo;
            let params ={"year":year,"month":month+1,"task_no":taskNo};
            planApi.orderGraphBottomBarByCondtion(params).then(res=>{
                self.bottomBar.xAxisData =  res.content.gxNameList;
                self.bottomBar.records =  res.content.records;
                self.setBottomBarSeriesData();
            });
        },
        //加工Bottom相关series
        setBottomBarSeriesData(){
            let self = this;
            self.bottomBar.seriesData = [];
            let data = [];
            let oldData = [];
            if(self.bottomBar.records!=undefined &&self.bottomBar.records.length!=0){
                self.bottomBar.records.forEach(item=>{
                        data.push({name:'',value:[
                            item.processName, //index 0
                            item.drawCount, //index 1
                            item.processPrice,//index 2
                            item.processTime,//index 3
                            item.totalNums//index 4
                            ]});
                    }        
                );
            };
            let seriesDataForBox={
                name:'',
                type:'bar',
                data:data
            };
            self.bottomBar.seriesData.push(seriesDataForBox);
            self.setInitBottomBarOption();
        },
        //设置Bottom统计图Option
        setInitBottomBarOption(){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];
            let echartsBottomBar = echarts.init(document.getElementById("bottomBar"));
            echartsBottomBar.clear();
            let option = {
                    title: {
                        text: '29所工序柱状图'
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        alwaysShowContent:false,
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        renderMode:'html',
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.bottomBarTooltipHander,
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [
                        {
                            show: true,
                            start: 1,
                            end: 100,
                            width: 1,
                        },
                        {
                            type: 'inside',
                            start: 1,
                            end: 100
                        },
                        // {
                        //     show: true,
                        //     yAxisIndex: 0,
                        //     filterMode: 'empty',
                        //     width: 10,
                        //     height: '80%',
                        //     showDataShadow: false,
                        //     left: '93%'
                        // }
                    ],
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: self.bottomBar.xAxisData
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} 张'  
                            },  
                        show: true  
                    },
                    series:self.bottomBar.seriesData
            };
            echartsBottomBar.setOption(option);
        },
        //查询条件
        searchByDate(val){
           let self = this;
           self.searchBox.searchTime = val;
           //进行时间节点所有单子的查询
           self.getOrderByDate();
        },
        //查询条件
        innersearchByDate(val){
           let self = this;
           self.innersearchBox.searchTime = val;
           //进行时间节点所有单子的查询
           self.getInnerOrderByDate();
        },
        //通过时间查询该时间段的所有单子
        getInnerOrderByDate(){
            let self = this;
            let params = {
                year:self.innersearchBox.searchTime.getFullYear(),
                month:self.innersearchBox.searchTime.getMonth()+1,
            };
            planApi.orderGraphTopBarByDate(params).then(res=>{
                let tempArrayListData = res.content;
                let uiData = res.content;
                self.topBar.orderList = [];
                this.$set(this,'searchSelectList',uiData);
                // self.topBar.orderList = uiData;
                if(tempArrayListData.length>1){
                    if(tempArrayListData[0] != ""){
                        self.innersearchBox.taskNo = tempArrayListData[0];
                    }else{
                        self.innersearchBox.taskNo = tempArrayListData[1];
                    }
                }else if(tempArrayListData.length>0){
                    self.innersearchBox.taskNo = tempArrayListData[0];
                }else{
                   self.innersearchBox.taskNo=null;
                }
                self.queryInitInnerTopBarData();
                self.queryDetailData();
            });
            // 
        },
        //初始化inner柱状统计图（第二层次柱状统计图）
        initInnerBar(){
            let self = this;
                self.queryInitInnerTopBarData();
                // self.queryDetailData();
        },
        //选择任务单号进行数据开发
        searchByTaskNo(val){
            let self = this;
                self.queryInitInnerTopBarData();
                self.queryDetailData();
        
        },
        //通过时间查询该时间段的所有单子
        getOrderByDate(){
            let self = this;
                self.initBar();
            // 
        },
        //柱状图(TopBar)鼠标移动浮框展示效果处理函数
        topBarTooltipHander(params){
            let self = this;
                    /*                          item.ptaskNo,  //结账订单编号
                            item.drawCount,//图纸数量
                            item.drawSumNums,//图纸件数
                            item.startDate,// 结账订单开始日期（年-月）
                            item.endDate,  // 结账订单结束日期（年-月）index 4
                            item.childTaskCount,//子订单数量 index 5
                            item.sxTotalWorkTimes,//数铣总工时（29所） index 6
                            item.sxTotalWorth,//数铣总价值（按照29所给的工时计算） index 7
                            item.pxTotalWorkTimes,//普洗总工时（29所） index 8
                            item.pxTotalWorth,//普洗总价值（按照29所给的工时计算） index 9
                            item.totalWorth,//总价值（按照29所给的工时计算） index 10
                            item.overDegree,//完成进度 index 11
                            item.totalWorth,//总价值（按照29所给的工时计算）index 12
                            item.gxStatisticsList,//工序详情 index 13
                            item.gxNameList,//工序名称列表  index 14
                             */ 
            
                self.bottomBar.childPtaskNo = params.value[0];
                self.isChild?"":self.bottomBar.ptaskNo =  params.value[0];
                self.bottomBar.records =  params.value[13];
                self.bottomBar.xAxisData = params.value[14];
                self.setBottomBarSeriesData();
        
            if(params!= null && params!= undefined){
                let status = params.value[15];
                let planHtml = '';
                if(status==0){
                        planHtml =  '<a href="javascript:void(0);" onclick="insertPlan(\'' +params.value[0]+'\',\''+1+'\')">加入生产</a> &nbsp;'
                }
                if(status==1){
                        planHtml =  '<a href="javascript:void(0);" onclick="insertPlan(\'' +params.value[0]+'\',\''+1+'\')">全部加入生产</a> &nbsp;'
                                 +  '<a href="javascript:void(0);" onclick="insertPlan(\'' +params.value[0]+'\',\''+0+'\')">全部取消生产</a> &nbsp;'
                }
                if(status==2){
                        planHtml =  '<a href="javascript:void(0);" onclick="insertPlan(\'' +params.value[0]+'\',\''+0+'\')">取消生产</a> &nbsp;'
                }
                if(self.isChild == true){
                let res          
                                        ='<a href="javascript:void(0);" onclick="drawDetailTip(\'' +params.value[0]+'\')">进度详情</a> &nbsp;'
                                        +planHtml
                                        +'<a href="javascript:void(0);" onclick="childDetail(\'' +params.value[0]+'\')">详情</a>'
                                        +'<br/>'
                                        +'结账单号：'+params.value[0]+'<br/>'
                                        +'状态：'+(params.value[15]==0?"全部图纸都未纳入生产计划":params.value[15]==1?"部分图纸纳入了生产计划":"全部图纸都纳入了生产计划")+'<br/>'
                                        +'结账周期：'+params.value[3]+' 至 '+params.value[4]+'<br/>'
                                        +'子单数量：'+params.value[5]+' 个'+'<br/>'
                                        +'完成进度: '+(params.value[11]?params.value[11]:0)+' %'+'<br/>'
                                        +'图纸数量: '+params.value[1]+' 张'+'<br/>'
                                        +'产品件数：'+params.value[2]+' 件'+'<br/>'
                                        +'数铣总工时（29所）：'+params.value[6]+' 个'+'<br/>'
                                        +'数铣总价值（29所）：'+params.value[7]+' ￥'+'<br/>'
                                        +'普洗总工时（29所）：'+params.value[8]+' 个'+'<br/>'
                                        +'普洗总价值（29所）：'+params.value[9]+' ￥'+'<br/>'
                                        +'总价值（29所）：'+params.value[10]+' ￥'+'<br/>'
                return res;
                }else{
                let res
                                      ='<a href="javascript:void(0);" onclick="liveTopDetail(\'' +params.value[0]+'\')">子单统计</a>&nbsp;'
                                        +planHtml
                                        +'<a href="javascript:void(0);" onclick="childDetail(\'' +params.value[0]+'\')">详情</a>'
                                        +'<br/>'
                                        +'结账单号：'+params.value[0]+'<br/>'
                                        +'状态：'+(params.value[15]==0?"全部图纸都未纳入生产计划":params.value[15]==1?"部分图纸纳入了生产计划":"全部图纸都纳入了生产计划")+'<br/>'
                                        +'结账周期：'+params.value[3]+' 至 '+params.value[4]+'<br/>'
                                        +'子单数量：'+params.value[5]+' 个'+'<br/>'
                                        +'完成进度: '+(params.value[11]?params.value[11]:0)+' %'+'<br/>'
                                        +'图纸数量: '+params.value[1]+' 张'+'<br/>'
                                        +'产品件数：'+params.value[2]+' 件'+'<br/>'
                                        +'数铣总工时（29所）：'+params.value[6]+' 个'+'<br/>'
                                        +'数铣总价值（29所）：'+params.value[7]+' ￥'+'<br/>'
                                        +'普洗总工时（29所）：'+params.value[8]+' 个'+'<br/>'
                                        +'普洗总价值（29所）：'+params.value[9]+' ￥'+'<br/>'
                                        +'总价值（29所）：'+params.value[10]+' ￥'+'<br/>'
                return res;
                }
         
            }
        },
        updateOrderPlanStatus(ptaskNo,orderPlanStatus){
            let self = this;
            planApi.updateOrderPlanStatus(ptaskNo,orderPlanStatus,self.searchBox.searchTime.getFullYear()).then(res=>{
                if(self.isChild){
                    self.queryInitTopBarDataForChild();
                }else{
                    self.queryInitTopBarData();
                }
            });
        },
        updateTaskPlanStatus(ptaskNo,orderPlanStatus){
            let self = this;
            planApi.updateTaskPlanStatus(ptaskNo,orderPlanStatus).then(res=>{
                self.drawDetailTableListData();
                self.queryInitTopBarDataForChild();

            });
        },
        //柱状图(TopBar)鼠标移动浮框展示效果处理函数
        innerTopBarTooltipHander(params){
            let self = this;
            console.log("=========================");
                self.innersearchBox.isDidThis = params.value[3],
                self.innersearchBox.wb_plan_finsih_date = params.value[0];
            console.log( self.innersearchBox.isDidThis);
            console.log( self.innersearchBox.wb_plan_finsih_date);
            if(params!= null && params!= undefined){
                let res ='<a href="javascript:void(0);" onclick="innerTopDetail(\'' +params.value[0]+'\')">图纸详情</a>&nbsp;'
                    +'<a href="javascript:void(0);" onclick="liveTopGxDetail(\'' +params.value[0]+'\')">工序详情</a><br/>'
                    +'单号：'+params.value[2]+'<br/>'
                    +'类型：'+params.seriesName+'<br/>'
                    +'图纸数：'+params.value[1]+' 张'+'<br/>'
                    +'时间：'+params.value[0]+' <br/>'
                return res;
            }
        },
        //柱状图(TopGxBar)鼠标移动浮框展示效果处理函数
        topGxBarTooltipHander(params){
            let self = this;
                // self.searchBox.isDidThis = params.value[3],
                 self.searchBox.wb_plan_finsih_date = null;
            if(params!= null && params!= undefined){
                let res =''
                // let res ='<a href="javascript:void(0);" onclick="topDetail(\'' +params.value[0]+'\')">查看详情</a>&nbsp;'
                    // +'<a href="javascript:void(0);" onclick="topGxDetail(\'' +params.value[0]+'\')">工序详情</a><br/>'
                    +'图号：'+params.value[3]+'<br/>'
                    +'件数：'+params.value[2]+'<br/>'
                    +'图纸数：'+params.value[1]+' 张'+'<br/>'
                    +'类型：'+params.value[0]+' <br/>'
                return res;
            }
        }, 
        //柱状图(bootomBar)鼠标移动浮框展示效果处理函数
        bottomBarTooltipHander(params){
            let self = this;
            self.searchBox.gx = params.value[3];
            if(params!= null && params!= undefined){
                            // item.processName, //index 0
                            // item.drawCount, //index 1
                            // item.processPrice,//index 2
                            // item.processTime,//index 3
                            // item.totalNums//index 4
                // let res ='<a href="javascript:void(0);" onclick="bottomDetail(\'' +params.value[3]+'\')">查看详情</a><br/>'
                let res =''
                    +'工序：'+params.value[0]+'<br/>'
                    +'图纸张数：'+params.value[1]+' 张<br/>'
                    +'工序总工时：'+params.value[3]+' ￥'+'<br/>'
                    +'工序总价值：'+params.value[2]+' ￥'+'<br/>'
                    +'件数：'+params.value[4]+' 件'+'<br/>'
                return res;
            }
        },
        topDetailHandleSizeChange(size) {
            let self = this;
                self.dialog.topBarDetail.pagesize = size;
                self.dialog.topBarDetail.tableList = self.topBarTableList.slice(
                (self.dialog.topBarDetail.currentPage - 1) * size,
                self.dialog.topBarDetail.currentPage * size
            )
        },
        topDetailHandleCurrentChange(currentPage) {
            let self = this;     
            self.dialog.topBarDetail.tableList = self.topBarTableList.slice(
                (currentPage - 1) * 10,
                currentPage * 10
            )
        }, 
        drawDetailHandleSizeChange(size) {
            let self = this;
                self.dialog.drawDetail.pagesize = size;
                self.dialog.drawDetail.tableList = self.drawDetailTableList.slice(
                (self.dialog.drawDetail.currentPage - 1) * size,
                self.dialog.drawDetail.currentPage * size
            )
        },
        drawDetailHandleCurrentChange(currentPage) {
            let self = this;     
            self.dialog.drawDetail.tableList = self.drawDetailTableList.slice(
                (currentPage - 1) * 10,
                currentPage * 10
            )
        },
        bottomDetailHandleSizeChange(size) {
            let self = this;
                self.dialog.bottomBarDetail.pagesize = size;
                self.dialog.bottomBarDetail.tableList = self.bottomBarTableList.slice(
                (self.dialog.bottomBarDetail.currentPage - 1) * size,
                self.dialog.bottomBarDetail.currentPage * size
            )
        },
        bottomDetailHandleCurrentChange(currentPage) {
            let self = this;     
            self.dialog.bottomBarDetail.tableList = self.bottomBarTableList.slice(
                (currentPage - 1) * 10,
                currentPage * 10
            )
        },
        //获取一天相关数据的类型
        topDetailTableListData(){
            let self = this;
                self.topBarTableList = [];
                debugger;
            let param = {
                // year:self.innersearchBox.searchTime.getFullYear(),
                // month:self.innersearchBox.searchTime.getMonth()+1,
                task_no:self.innersearchBox.taskNo,
                isDidThis:self.innersearchBox.isDidThis,
                wb_plan_finsih_date:self.innersearchBox.wb_plan_finsih_date
            };
            planApi.queryTopDetailTableListData(param).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.topBarTableList = res.content;
                    self.dialog.topBarDetail.tableList = self.topBarTableList.slice(0,10);
                    self.dialog.topBarDetail.total =  self.topBarTableList.length;
                    self.dialog.topBarDetail.title = '图纸清单';
                    self.dialog.topBarDetail.isShow = true;
                    //如果不为空，则进行数据绑定
                    //如果为空，则进行用户提示信息“not found data for the operation![未找到相关数据]”
                }
            });
        },
        //获取相关子单号下面所有图纸的进度展示
        drawDetailTableListData(){
            let self = this;
                self.drawDetailTableList = [];
            planApi.queryDrawDetailTableListData(self.dialog.drawDetail.ptaskNo,self.searchBox.searchTime.getFullYear()).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.drawDetailTableList = res.content;
                    self.dialog.drawDetail.tableList = self.drawDetailTableList.slice(0,10);
                    self.dialog.drawDetail.total =  self.drawDetailTableList.length;
                    self.dialog.drawDetail.title = '图纸进度清单';
                    self.dialog.drawDetail.isShow = true;
                    //如果不为空，则进行数据绑定
                    //如果为空，则进行用户提示信息“not found data for the operation![未找到相关数据]”
                }
            });
        }, 
        //获取谋到工序的相关数据
        bottomDetailTableListData(){
            let self = this;
                self.bottomBarTableList = [];
            let param = {
                year:self.searchBox.searchTime.getFullYear(),
                month:self.searchBox.searchTime.getMonth()+1,
                task_no:self.searchBox.taskNo,
                gx:self.searchBox.gx,
            };
            planApi.queryBottomDetailTableListData(param).then(res=>{
                if(res.content!=null && res.content!=undefined){
                    self.bottomBarTableList = res.content;
                    self.dialog.bottomBarDetail.tableList = self.bottomBarTableList.slice(0,10);
                    self.dialog.bottomBarDetail.total =  self.bottomBarTableList.length;
                    self.dialog.bottomBarDetail.title = '工序图纸清单';
                    self.dialog.bottomBarDetail.isShow = true;
                    //如果不为空，则进行数据绑定
                    //如果为空，则进行用户提示信息“not found data for the operation![未找到相关数据]”
                }
            });
        },
        //图纸详情
        drawDetail(row){
            let self = this;
            //图纸编号
            self.searchBox.draw_code =  row.drawCode==undefined?row.draw_code:row.drawCode;
            self.topGxDetailData();
        },
        queryDayValList(){
            let self = this;
            self.selectDzjzGantt();
        },
        /**查询某个用户某个时间段的缔造价值统计甘特图 */
        selectDzjzGantt(){
            let self = this;
            self.drawCustom();
        },
        drawCustom() {
                    let _this = this;
                    debugger;
                    this.chartCustom = echarts.init(document.getElementById('gantt'));
                    function renderItem(params, api) {
                        let categoryIndex = api.value(0);
                        let start = api.coord([api.value(1), categoryIndex]);
                        let end = api.coord([api.value(2), categoryIndex]);
                        let height = api.size([0, 1])[1] * 0.6;

                        let rectShape = echarts.graphic.clipRectByRect({
                            x: start[0],
                            y: start[1] - height / 2,
                            width: end[0] - start[0],
                            height: height
                        }, {
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height
                        });

                        return rectShape && {
                            type: 'rect',
                            shape: rectShape,
                            style: api.style()
                        };
                    }
                    let legendData=[],yAxisData =[],seriesData=[];
                    console.log( _this.customData );
                    for (let i = 0; i < _this.customData.length; i++) {

                        let item = _this.customData[i];
                        yAxisData.push(item.ptaskNo);
                        // legendData.push({
                        //     name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                        //     icon: 'circle'
                        // });

                        seriesData.push({
                            // name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                            type: "custom",
                            itemStyle: {
                                    normal: {
                                    color:"rgb(58, 193, 196)",
                                    opacity: 0.8,
                                        }
                                }, 
                            encode: {x: [1, 2], y: 0},
                            renderItem: renderItem,
                            data: [
                                {
                                    // name: item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" : ''),
                                    value: [
                                        item.ptaskNo,
                                        item.startDate,
                                        item.endDate,
                                    ]
                                }
                            ]
                        })
                    }
                    this.chartCustom.clear();
                    this.chartCustom.setOption({
                        color: [
                            '#0796ea',
                            '#F6F6F6',
                            '#0796ea',
                        ],
                        title: {
                            text: '甘特统计',
                            textStyle: {
                                color: '#000',
                                fontSize: 17,
                                fontFamily: '微软雅黑'
                            }
                        },
                        tooltip: {
                            backgroundColor: "#F6F6F6",
                            borderWidth: 1,
                            borderColor: "rgba(0,0,0,.3)",
                            triggerOn: "click",
                            confine: true,
                            enterable: true,
                            transitionDuration: 0,
                            textStyle: {color: "#333"},
                            extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                            formatter: function (params) {
                                return '<div style="width: 300px;">' + 
                                    '<P>结账单号：' + params.value[0] +' </P>' +
                                    '<P>起止时间：' + params.value[1]+' 至 '+params.value[2]+'</P>' +
                                    '</div>';
                            }
                        },
                        dataZoom: [
                            {
                                type: 'slider',
                                filterMode: 'weakFilter',
                                showDataShadow: true,
                                bottom: 10,
                                height: 5,
                                borderColor: 'transparent',
                                backgroundColor: '#e2e2e2',
                                handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
                                handleSize: 20,
                                handleStyle: {
                                    shadowBlur: 6,
                                    shadowOffsetX: 1,
                                    shadowOffsetY: 2,
                                    shadowColor: '#aaa'
                                },
                                labelFormatter: ''
                            },
                            {
                                type: 'inside',
                                filterMode: 'weakFilter'
                            }
                        ],
                        // legend: {
                        //     left:100,
                        //     itemWidth: 14,
                        //     data:legendData
                        // },
                        grid: {left: 100, right: 40, bottom: 50,top:30},
                        xAxis: {
                            type: 'time',
                            splitLine: {show: false},
                            // axisLabel: {
                            //     formatter: function (params) {
                            //         return _this.timestampToTime(params).substr(11)
                            //     }
                            // }
                        },
                        yAxis: {
                            data: _this.unique(yAxisData)
                        },
                        series: seriesData
                    });///
        },
        unique(Array) {
                    let res = [];
                    let json = {};
                    for (let i = 0; i < Array.length; i++) {
                        if (!json[Array[i]]) {
                            res.push(Array[i]);
                            json[Array[i]] = 1;
                        }
                    }
                    return res;
        },
        resetSelectSearch(){
            let self = this;
            self.queryInitTopBarData();
            self.restData();
        },
        //restData 重置返回上层的数据结构
        restData(){
            let self = this;
            self.isChild = false;
            self.bottomBar.ptaskNo=null;
            self.bottomBar.childPtaskNo=null;
            let echartsBottomBar = echarts.init(document.getElementById("bottomBar"));
            echartsBottomBar.clear();
        },
    },
}
window.insertPlan =  function(ptaskNo,orderPlanStatus){
    let self = window.self;
    // console.log(ptaskNo);
    // console.log(orderPlanStatus);
    self.updateOrderPlanStatus(ptaskNo,orderPlanStatus);

};
window.liveTopDetail = function(val){
    let self = window.self;
    self.isloading = true;
    self.queryInitTopBarDataForChild();
};
window.childDetail = function(val){
    let self = window.self;
    self.dialog.childBox.isShow =true;
    self.innersearchBox.taskNo =  val;
    console.log(self.innersearchBox.taskNo);
    self.initInnerBar();
};
window.innerTopDetail = function(val){
    let self = window.self;
    self.serchRule = '';
    self.topDetailTableListData();
};
window.drawDetailTip = function(val){
    let self = window.self;
    self.dialog.drawDetail.ptaskNo = val;
    self.drawDetailTableListData();
};
window.liveTopGxDetail = function(val){
    let self = window.self;
    if(self.innersearchBox.isDidThis==1){
        self.innersearchBox.draw_code= null;
        self.topGxDetailData();
    }else{
          self.$message({
          message: '新图纸未进行工艺编程',
          type: 'success'
        });
    }
};
window.liveBottomDetail = function(val){
    let self = window.self;
    self.innersearchBox.wb_plan_finsih_date = null;
    self.bottomDetailTableListData();
};
</script>
<style scoped>
#topBar {
    position: relative;
    z-index: 999;
}
#bottomBar {
    position: relative;
    z-index: 999;
}
#topGxBar{
    width:1366px;
}
#gantt{
    width:100%;
}
</style>

